﻿<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TODO List</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var model = {
            user: "Jerry",
            items: [
                    { "action": "编写方案文档", done: false },
                    { "action": "面试技术人员", done: false },
                    { "action": "向老板汇报", done: true },
                    { "action": "召开部门会议", done: false }]
        };
        var todoApp = angular.module('todoApp', []);

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;
        });
    </script>
    <style>
        td > *:first-child {
            color:red
        }
    </style>

</head>
<body ng-controller="ToDoCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                {{todo.user}}的待办事务列表
            </h1>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>描述</th>
                    <th>完成</th>
                    <th>Done(使用ng-show)</th>
                    <th>Done(使用ng-if)</th>
                </tr>
            </thead>
            <tr ng-repeat="item in todo.items">
                <td>{{$index + 1}}</td>
                <td>{{item.action}}</td>
                <td>
                    <input type="checkbox" ng-model="item.done" />
                </td>
                <td>
                    <!--
                    ng-hide事实上是这是display为"none"，
                    这部分内容虽然不显示给用户，但是在浏览器的内容流中是存在的
                    而css的":first-child"选择器将会选择内容流中的第一个元素，无论其是否显示给用户。
                    下面的代码将造成：Incomplete能够应用样式，而Done因为已经不是第一个元素，不会应用样式
                -->
                    <span ng-hide="item.done">(Incomplete)</span>
                    <span ng-show="item.done">(Done)</span>
                </td>
                <td>
                    <!--
                    被ng-if修饰的元素，如果不满足条件，则不会出现在内容流中
                -->
                    <span ng-if="!item.done">(Incomplete)</span>
                    <span ng-if="item.done">(Done)</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
